<template>
  <div class="donation-page">
    <!-- 顶部横幅 -->
    <div class="donation-banner">
      <div class="banner-content">
        <h1>众筹捐助</h1>
        <p>每一份爱心都是海洋生态保护的力量</p>
        <div class="stats-cards">
          <div class="stat-card">
            <div class="stat-icon">
              <el-icon :size="32"><Money /></el-icon>
            </div>
            <div class="stat-info">
              <div class="stat-number">¥{{ totalDonation.toLocaleString() }}</div>
              <div class="stat-label">累计捐助</div>
            </div>
          </div>
          <div class="stat-card">
            <div class="stat-icon">
              <el-icon :size="32"><User /></el-icon>
            </div>
            <div class="stat-info">
              <div class="stat-number">{{ totalDonors.toLocaleString() }}</div>
              <div class="stat-label">爱心人士</div>
            </div>
          </div>
          <div class="stat-card">
            <div class="stat-icon">
              <el-icon :size="32"><Collection /></el-icon>
            </div>
            <div class="stat-info">
              <div class="stat-number">{{ totalProjects }}</div>
              <div class="stat-label">在筹项目</div>
            </div>
          </div>
        </div>
      </div>
    </div>

    <!-- 项目筛选区 -->
    <div class="filter-section">
      <div class="filter-container">
        <div class="filter-options">
          <div class="category-filter">
            <el-radio-group v-model="activeCategory" size="large">
              <el-radio-button label="all">全部项目</el-radio-button>
              <el-radio-button label="urgent">紧急救助</el-radio-button>
              <el-radio-button label="protection">生态保护</el-radio-button>
              <el-radio-button label="research">科研项目</el-radio-button>
              <el-radio-button label="education">环保教育</el-radio-button>
            </el-radio-group>
          </div>

          <div class="sort-filter">
            <el-select v-model="sortBy" placeholder="排序方式" class="sort-select">
              <el-option label="最新发起" value="latest">
                <template #default="{ label }">
                  <el-icon><Timer /></el-icon>
                  <span>{{ label }}</span>
                </template>
              </el-option>
              <el-option label="金额最高" value="amount">
                <template #default="{ label }">
                  <el-icon><Money /></el-icon>
                  <span>{{ label }}</span>
                </template>
              </el-option>
              <el-option label="完成最快" value="progress">
                <template #default="{ label }">
                  <el-icon><Histogram /></el-icon>
                  <span>{{ label }}</span>
                </template>
              </el-option>
            </el-select>
          </div>
        </div>
      </div>
    </div>

    <!-- 项目列表 -->
    <div class="projects-container">
      <el-row :gutter="30">
        <el-col v-for="project in filteredProjects" 
                :key="project.id" 
                :xs="24" 
                :sm="12" 
                :lg="8" 
                class="project-col">
          <div class="project-card" @click="viewProjectDetail(project.id)">
            <div class="project-image">
              <el-image :src="project.image" fit="cover" loading="lazy">
                <template #placeholder>
                  <div class="image-placeholder">
                    <el-icon><Picture /></el-icon>
                  </div>
                </template>
              </el-image>
              <div class="project-badges">
                <el-tag v-if="project.isUrgent" type="danger" effect="dark">紧急</el-tag>
                <el-tag :type="getCategoryType(project.category)" effect="dark">
                  {{ getCategoryLabel(project.category) }}
                </el-tag>
              </div>
              <div class="remaining-days">
                <el-icon><Timer /></el-icon>
                剩余 {{ getDaysLeft(project.endDate) }} 天
              </div>
            </div>
            
            <div class="project-content">
              <h3 class="project-title">{{ project.title }}</h3>
              <p class="project-desc">{{ project.description }}</p>
              
              <div class="project-progress">
                <div class="progress-info">
                  <span class="raised">已筹 ¥{{ project.raised.toLocaleString() }}</span>
                  <span class="target">目标 ¥{{ project.target.toLocaleString() }}</span>
                </div>
                <el-progress 
                  :percentage="(project.raised / project.target) * 100"
                  :color="getProgressColor(project.raised / project.target)"
                />
                <div class="progress-stats">
                  <div class="stat-item">
                    <div class="stat-value">{{ project.donors }}</div>
                    <div class="stat-label">支持者</div>
                  </div>
                </div>
              </div>

              <div class="project-footer">
                <div class="organization">
                  <el-avatar :size="24" :src="project.orgLogo" />
                  <span>{{ project.orgName }}</span>
                </div>
              </div>
            </div>
          </div>
        </el-col>
      </el-row>

      <!-- 分页器 -->
      <div class="pagination-container">
        <el-pagination
          v-model:current-page="currentPage"
          v-model:page-size="pageSize"
          :total="totalProjects"
          :page-sizes="[9, 18, 36]"
          layout="total, sizes, prev, pager, next, jumper"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
        />
      </div>
    </div>

    <!-- 捐助对话框 -->
    <el-dialog
      v-model="donateDialogVisible"
      title="爱心捐助"
      width="400px"
      :close-on-click-modal="false"
    >
      <div class="donate-form">
        <div class="amount-options">
          <el-radio-group v-model="donateAmount" size="large">
            <el-radio-button label="10">¥10</el-radio-button>
            <el-radio-button label="50">¥50</el-radio-button>
            <el-radio-button label="100">¥100</el-radio-button>
            <el-radio-button label="500">¥500</el-radio-button>
          </el-radio-group>
          <el-input
            v-model="customAmount"
            placeholder="自定义金额"
            type="number"
            min="1"
          >
            <template #prefix>¥</template>
          </el-input>
        </div>
        <div class="payment-methods">
          <h4>选择支付方式</h4>
          <el-radio-group v-model="paymentMethod" class="payment-options">
            <el-radio label="wechat">
              <el-icon><Wallet /></el-icon>
              微信支付
            </el-radio>
            <el-radio label="alipay">
              <el-icon><CreditCard /></el-icon>
              支付宝
            </el-radio>
          </el-radio-group>
        </div>
      </div>
      <template #footer>
        <div class="dialog-footer">
          <el-button @click="donateDialogVisible = false">取消</el-button>
          <el-button type="primary" @click="confirmDonate">
            确认捐助
          </el-button>
        </div>
      </template>
    </el-dialog>
  </div>
</template>

<script setup>
import { ref, computed } from 'vue'
import { 
  Money, User, Collection, Timer, Picture, Histogram,
  Wallet, CreditCard
} from '@element-plus/icons-vue'
import { ElMessage } from 'element-plus'
import { useRouter } from 'vue-router'

const router = useRouter()

// 统计数据
const totalDonation = ref(2580960)
const totalDonors = ref(25689)
const totalProjects = ref(168)

// 状态变量
const activeCategory = ref('all')
const sortBy = ref('latest')
const currentPage = ref(1)
const pageSize = ref(9)
const donateDialogVisible = ref(false)
const donateAmount = ref(100)
const customAmount = ref('')
const paymentMethod = ref('wechat')
const currentProject = ref(null)

// 模拟项目数据
const projects = ref([
  {
    id: 1,
    title: '珊瑚礁修复计划',
    description: '在三亚海域建立珊瑚礁保护区，修复受损的珊瑚礁生态系统。',
    image: 'https://images.unsplash.com/photo-1682687220742-aba13b6e50ba?w=800',
    category: 'protection',
    isUrgent: true,
    raised: 156800,
    target: 300000,
    donors: 1268,
    endDate: '2024-06-30',
    orgName: '海洋生态保护协会',
    orgLogo: 'https://images.unsplash.com/photo-1621451537084-482c73073a0f?w=100'
  },
  {
    id: 2,
    title: '海龟救助站建设',
    description: '在海南文昌建立海龟救助站，为受伤的海龟提供治疗和康复场所。',
    image: 'https://images.unsplash.com/photo-1437622368342-7a3d73a34c8f?w=800',
    category: 'urgent',
    isUrgent: true,
    raised: 89600,
    target: 200000,
    donors: 756,
    endDate: '2024-05-15',
    orgName: '海洋动物保护中心',
    orgLogo: 'https://images.unsplash.com/photo-1559494007-9f5847c49d94?w=100'
  },
  {
    id: 3,
    title: '海洋生态监测站',
    description: '建立智能化海洋生态监测站，实时监测海水质量和海洋生物多样性。',
    image: 'https://images.unsplash.com/photo-1621451537084-482c73073a0f?w=800',
    category: 'research',
    isUrgent: false,
    raised: 320000,
    target: 500000,
    donors: 2156,
    endDate: '2024-07-20',
    orgName: '海洋研究所',
    orgLogo: 'https://images.unsplash.com/photo-1439405326854-014607f694d7?w=100'
  }
])

// 计算属性
const filteredProjects = computed(() => {
  let result = [...projects.value]
  
  // 分类过滤
  if (activeCategory.value !== 'all') {
    result = result.filter(project => project.category === activeCategory.value)
  }
  
  // 排序
  switch (sortBy.value) {
    case 'amount':
      result.sort((a, b) => b.raised - a.raised)
      break
    case 'progress':
      result.sort((a, b) => (b.raised / b.target) - (a.raised / a.target))
      break
    default:
      // 默认按最新排序
      result.sort((a, b) => new Date(b.endDate) - new Date(a.endDate))
  }
  
  return result
})

// 方法
const getCategoryType = (category) => {
  const types = {
    urgent: 'danger',
    protection: 'success',
    research: 'primary',
    education: 'warning'
  }
  return types[category] || 'info'
}

const getCategoryLabel = (category) => {
  const labels = {
    urgent: '紧急救助',
    protection: '生态保护',
    research: '科研项目',
    education: '环保教育'
  }
  return labels[category] || '其他'
}

const getProgressColor = (progress) => {
  if (progress >= 1) return '#67C23A'
  if (progress >= 0.8) return '#409EFF'
  if (progress >= 0.5) return '#E6A23C'
  return '#F56C6C'
}

const getDaysLeft = (endDate) => {
  const days = Math.ceil((new Date(endDate) - new Date()) / (1000 * 60 * 60 * 24))
  return days > 0 ? `${days}天` : '已结束'
}

const handleDonate = (project) => {
  currentProject.value = project
  donateDialogVisible.value = true
}

const confirmDonate = () => {
  const amount = customAmount.value || donateAmount.value
  if (!amount || amount <= 0) {
    ElMessage.warning('请输入有效的捐助金额')
    return
  }
  
  if (!paymentMethod.value) {
    ElMessage.warning('请选择支付方式')
    return
  }

  // 这里添加实际的支付逻辑
  ElMessage.success('感谢您的爱心捐助！')
  donateDialogVisible.value = false
}

const handleSizeChange = (val) => {
  pageSize.value = val
  currentPage.value = 1
}

const handleCurrentChange = (val) => {
  currentPage.value = val
}

// 查看项目详情
const viewProjectDetail = (id) => {
  router.push(`/donation/${id}`)
}
</script>

<style scoped lang="scss">
.donation-page {
  min-height: 100vh;
  background-color: #f5f7fa;

  .donation-banner {
    background: linear-gradient(rgba(0,0,0,0.6), rgba(0,0,0,0.6)),
                url('https://images.unsplash.com/photo-1621451537084-482c73073a0f?w=1920') center/cover;
    color: white;
    padding: 60px 0;
    margin-bottom: 40px;
    border-radius: 8px;


    .banner-content {
      max-width: 1200px;
      margin: 0 auto;
      padding: 0 20px;
      text-align: center;

      h1 {
        font-size: 3em;
        margin-bottom: 20px;
        font-weight: 600;
      }

      p {
        font-size: 1.2em;
        margin-bottom: 40px;
        opacity: 0.9;
      }

      .stats-cards {
        display: flex;
        justify-content: center;
        gap: 30px;
        margin-top: 40px;

        .stat-card {
          background: rgba(255, 255, 255, 0.1);
          backdrop-filter: blur(10px);
          padding: 20px 40px;
          border-radius: 12px;
          display: flex;
          align-items: center;
          gap: 20px;

          .stat-icon {
            background: rgba(255, 255, 255, 0.2);
            width: 60px;
            height: 60px;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
          }

          .stat-info {
            text-align: left;

            .stat-number {
              font-size: 2em;
              font-weight: 600;
              line-height: 1.2;
            }

            .stat-label {
              font-size: 0.9em;
              opacity: 0.8;
            }
          }
        }
      }
    }
  }

  .filter-section {
    max-width: 1400px;
    margin: 0 auto 30px;
    padding: 0 20px;
    
    .filter-container {
      background: white;
      border-radius: 16px;
      padding: 24px;
      box-shadow: 0 2px 12px rgba(0, 0, 0, 0.05);

      .filter-options {
        display: flex;
        justify-content: space-between;
        align-items: center;
        gap: 20px;

        .category-filter {
          flex: 1;

          :deep(.el-radio-group) {
            display: flex;
            flex-wrap: wrap;
            gap: 10px;

            .el-radio-button {
              &:first-child .el-radio-button__inner {
                border-radius: 8px 0 0 8px;
              }
              
              &:last-child .el-radio-button__inner {
                border-radius: 0 8px 8px 0;
              }

              .el-radio-button__inner {
                height: 40px;
                padding: 0 20px;
                display: flex;
                align-items: center;
                transition: all 0.3s;
                
                &:hover {
                  background-color: #ecf5ff;
                }
              }
            }
          }
        }

        .sort-filter {
          .sort-select {
            width: 160px;

            :deep(.el-select-dropdown__item) {
              display: flex;
              align-items: center;
              gap: 8px;
              padding: 8px 12px;

              .el-icon {
                font-size: 16px;
                color: #909399;
              }
            }
          }
        }
      }
    }
  }

  .projects-container {
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 20px 60px;

    .project-col {
      margin-bottom: 30px;
    }

    .project-card {
      background: white;
      border-radius: 16px;
      overflow: hidden;
      box-shadow: 0 4px 20px rgba(0,0,0,0.05);
      transition: all 0.3s ease;

      &:hover {
        transform: translateY(-5px);
        box-shadow: 0 8px 30px rgba(0,0,0,0.1);
      }

      .project-image {
        position: relative;
        height: 200px;

        .el-image {
          width: 100%;
          height: 100%;
        }

        .project-badges {
          position: absolute;
          top: 20px;
          right: 20px;
          display: flex;
          gap: 8px;
          z-index: 1;
        }

        .remaining-days {
          position: absolute;
          top: 20px;
          left: 20px;
          background: rgba(0, 0, 0, 0.5);
          padding: 4px 8px;
          border-radius: 4px;
          color: white;
          font-size: 12px;
          display: flex;
          align-items: center;
          gap: 4px;

          .el-icon {
            font-size: 16px;
          }
        }
      }

      .project-content {
        padding: 24px;

        .project-title {
          font-size: 1.4em;
          font-weight: 600;
          color: #303133;
          margin-bottom: 12px;
        }

        .project-desc {
          color: #606266;
          font-size: 14px;
          line-height: 1.6;
          margin-bottom: 20px;
          display: -webkit-box;
          -webkit-line-clamp: 2;
          -webkit-box-orient: vertical;
          overflow: hidden;
          min-height: 44px;
        }

        .project-progress {
          background: #f5f7fa;
          padding: 20px;
          border-radius: 12px;
          margin-bottom: 20px;

          .progress-info {
            display: flex;
            justify-content: space-between;
            margin-bottom: 8px;
            font-size: 14px;

            .raised {
              color: #409EFF;
              font-weight: 600;
            }

            .target {
              color: #909399;
            }
          }

          .progress-stats {
            display: flex;
            justify-content: space-around;
            margin-top: 16px;
            
            .stat-item {
              text-align: center;

              .stat-value {
                font-size: 1.2em;
                font-weight: 600;
                color: #303133;
                margin-bottom: 4px;
              }

              .stat-label {
                font-size: 12px;
                color: #909399;
              }
            }
          }
        }

        .project-footer {
          display: flex;
          justify-content: space-between;
          align-items: center;

          .organization {
            display: flex;
            align-items: center;
            gap: 8px;
            color: #606266;
            font-size: 14px;
          }
        }
      }
    }
  }

  .pagination-container {
    margin-top: 40px;
    text-align: center;
  }
}

.donate-form {
  .amount-options {
    margin-bottom: 24px;

    .el-radio-group {
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      gap: 12px;
      margin-bottom: 12px;
    }

    .el-input {
      margin-top: 12px;
    }
  }

  .payment-methods {
    h4 {
      margin-bottom: 16px;
      color: #303133;
    }

    .payment-options {
      display: flex;
      flex-direction: column;
      gap: 16px;

      .el-radio {
        height: 40px;
        
        .el-icon {
          margin-right: 8px;
          font-size: 20px;
        }
      }
    }
  }
}

@media (max-width: 768px) {
  .donation-page {
    .donation-banner {
      padding: 40px 0;

      .banner-content {
        h1 {
          font-size: 2em;
        }

        .stats-cards {
          flex-direction: column;
          gap: 20px;
        }
      }
    }

    .filter-section {
      .filter-container {
        padding: 16px;

        .filter-options {
          flex-direction: column;
          align-items: stretch;

          .category-filter {
            :deep(.el-radio-group) {
              display: grid;
              grid-template-columns: repeat(2, 1fr);
              width: 100%;

              .el-radio-button {
                &:first-child .el-radio-button__inner {
                  border-radius: 8px 0 0 0;
                }
                
                &:nth-child(2) .el-radio-button__inner {
                  border-radius: 0 8px 0 0;
                }
                
                &:nth-last-child(2) .el-radio-button__inner {
                  border-radius: 0 0 0 8px;
                }
                
                &:last-child .el-radio-button__inner {
                  border-radius: 0 0 8px 0;
                }

                .el-radio-button__inner {
                  width: 100%;
                  justify-content: center;
                }
              }
            }
          }

          .sort-filter {
            width: 100%;
            
            .sort-select {
              width: 100%;
            }
          }
        }
      }
    }
  }
}
</style> 